//居中
.margin-center{
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
body{
  font-size: 16px;
}

.main{
  width: 90rem;
  @extend .margin-center;
  //导航栏
  .navigation{
    display: flex;
    justify-content: center;
    font-size: 20px;
    margin: 0 0 20px ;
    //导航栏外框
    .nav-wrap{
      a{
        margin: 0 10px;
        text-decoration: none;
        cursor: pointer;
      }
    }
  }
  //主页
  .index{
    @extend .margin-center;
    h1{
      text-align: center;
    }
    table{
      @extend .margin-center;
      tr{
        td{
          border: 1px solid black;
          padding: 10px;
        }
      }
    }
  }
  //list
  .list{
    display: flex;
    justify-content: center;
    .list-wrap{
      border: 1px solid black;
      padding: 10px 20px;
      display: flex;
      flex-wrap: wrap;
      width: 92%;
      min-height: 100px;
      box-sizing: border-box;
      //显示列表
      .list-inner{
        //border: 1px solid black;
        //展开
        .unfold{
          margin: 5px 10px 5px 0px;
          padding: 2px 10px ;
        }
        .list-info{
          border: 1px solid black;
          display: flex;
          justify-content: center;
          align-items: center;
          //width: 100%;
          width:  80rem;
          //展示内容
          .list-name{
            display: flex;
            margin-left: auto;
          }
          //操作区
          .operating{
            display: flex;
            flex-direction: column;
            margin-left: auto;
          }

        }
      }
      //主要操作
      .main-op{
        //position: fixed;
        display: flex;
        justify-content: center;
        //margin-top: 40px;
        width: 100%;
        div{
          border: 1px solid black;
          border-radius: 3px;
          text-align: center;
          line-height: 100%;
          margin: 5px 10px 0;
          padding: 10px 50px;
          &:hover{
            cursor: pointer;
            background: rgba(0,0,0,.1);
          }
        }
      }
    }
    //列表动画
    .fade-enter-active, .fade-leave-active {
      transition: opacity .5s
    }
    .fade-enter, .fade-leave-active {
      opacity: 0
    }
  }
  //路由动画
  .fade-slide-left-enter-active, .fade-slide-left-leave-active,
  .fade-slide-right-enter-active, .fade-slide-right-leave-active {
    will-change: transform;
    transition: all .5s;

  }
  .fade-slide-left-enter,.fade-slide-left-leave{
    opacity: 0;
    transform: translateX(10%);

  }
  .fade-slide-right-enter,.fade-slide-right-leave {
    opacity: 0;
    transform: translateX(-10%);

  }



}

